<template>
    <div id="box">
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="mains" style="width: 600px;height:400px;"></div>
        <div id="main3" style="width: 600px;height:400px;"></div>
        <div id="main4" style="width: 600px;height:400px;"></div>
        <div id="main5" style="width: 600px;height:400px;"></div>
    </div>
</template>

<script>
    export default {
        name: 'adminList',
        data: function() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart2();
                this.initChart();
                this.initChart3();
                this.clickMain();
                this.mainClick5();
            })
        },
        methods: {
            initChart2() {
                var myChart = this.$echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    title: { //标题内容
                        text: 'ECharts 入门第一天啊'
                    },
                    tooltip: {},
                    legend: { //图例
                        data: ['销量', '成本']
                    },
                    xAxis: { //x轴
                        data: ["衬衫", "雪纺衫", '牛子裤', "高跟鞋"],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    yAxis: {},
                    series: [{ // 
                            name: '销量',
                            type: 'bar',
                            data: [5, 36, 20, 50]
                        },
                        {
                            name: '成本',
                            type: 'bar',
                            data: [5, 36, 20, 2]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            initChart() {
                var myChart = this.$echarts.init(document.getElementById('mains'));

                var option = {
                    angleAxis: {},
                    radiusAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四'],
                        z: 10
                    },
                    polar: {},
                    series: [{
                        type: 'bar',
                        data: [1, 2, 3, 4],
                        coordinateSystem: 'polar',
                        name: 'A',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [2, 4, 6, 8],
                        coordinateSystem: 'polar',
                        name: 'B',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [1, 2, 3, 4],
                        coordinateSystem: 'polar',
                        name: 'C',
                        stack: 'a'
                    }],
                    legend: {
                        show: true,
                        data: ['A', 'B', 'C']
                    }
                };
                myChart.setOption(option);
            },
            initChart3() {
                var myChart = this.$echarts.init(document.getElementById('main3'));

                var option = {
                    title: {
                        text: '堆叠区域图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {},
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                myChart.setOption(option);
            },
            clickMain() {
                var myChart = this.$echarts.init(document.getElementById('main4'));
                var option = {
                    title: {
                        text: 'echarts 第二天'
                    },
                    tooltip: {},
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: ['视频广告', '联盟广告', '邮件营销']
                    },

                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        data: [{
                                value: 235,
                                name: '视频广告',
                            },
                            {
                                value: 274,
                                name: '联盟广告'
                            },
                            {
                                value: 310,
                                name: '邮件营销'
                            },
                            {
                                value: 335,
                                name: '直接访问'
                            },
                            {
                                value: 400,
                                name: '搜索引擎'
                            }
                        ],
                        roseType: 'angle',
                        itemStyle: {
                            normal: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                }
                myChart.setOption(option);

            },
            mainClick5() {
                console.log((Math.random() * 10));

                var myChart = this.$echarts.init(document.getElementById('main5'));
                var option = {
                    title: {
                        text: '一天用电量分布',
                        subtext: '美好的一天在于天气得还坏'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    // toolbox: {
                    //     show: true,
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    legend: {
                        left: 'center',
                        top: 'top',
                        data: ['上班', '下班']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} W'
                        },
                        axisPointer: {
                            snap: true
                        }
                    },
                    // visualMap: {
                    //     show: false,
                    //     dimension: 0,
                    //     pieces: [{
                    //         lte: 6,
                    //         color: 'green'
                    //     }, {
                    //         gt: 6,
                    //         lte: 8,
                    //         color: 'red'
                    //     }, {
                    //         gt: 8,
                    //         lte: 14,
                    //         color: 'green'
                    //     }, {
                    //         gt: 14,
                    //         lte: 17,
                    //         color: 'red'
                    //     }, {
                    //         gt: 17,
                    //         color: 'green'
                    //     }]
                    // },
                    series: [{
                        name: '用电量',
                        type: 'line',
                        smooth: true,
                        data: [400],
                        markArea: {
                            data: [
                                [{
                                    name: '早高峰',
                                    xAxis: '07:30'
                                }, {
                                    xAxis: '10:00'
                                }],
                                [{
                                    name: '晚高峰',
                                    xAxis: '17:30'
                                }, {
                                    xAxis: '21:15'
                                }]
                            ]
                        }
                    }]
                }
                myChart.setOption(option);
            }


        }
    }
</script>

<style scoped>
    #box {
        overflow-y: auto;
        height: 500px;
    }
</style>